<template>
  <button
      class="el-button"
      @click="handleClick"
      :disabled="buttonDisabled || loading"
      :autofocus="autofocus"
      :type="nativeType"
      :class="[
      type ? 'el-button--' + type : '',
      buttonSize ? 'el-button--' + buttonSize : '',
      {
        'is-disabled': buttonDisabled,
        'is-loading': loading,
        'is-plain': plain,
        'is-round': round,
        'is-circle': circle
      }
    ]"
  >
    <i class="el-icon-loading" v-if="loading"></i>
    <i :class="icon" v-if="icon && !loading"></i>
    <span v-if="$slots.default"><slot></slot></span>
  </button>
</template>
<script>
export default {
  name: 'ElButton',

  inject: {
    elForm: {
      default: ''
    },
    elFormItem: {
      default: ''
    }
  },

  props: {
    type: {
      type: String,
      default: 'default'
    },
    size: String,
    icon: {
      type: String,
      default: ''
    },
    nativeType: {
      type: String,
      default: 'button'
    },
    loading: Boolean,
    disabled: Boolean,
    plain: Boolean,
    autofocus: Boolean,
    round: Boolean,
    circle: Boolean
  },

  computed: {
    _elFormItemSize() {
      return (this.elFormItem || {}).elFormItemSize;
    },
    buttonSize() {
      return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
    },
    buttonDisabled() {
      return this.disabled || (this.elForm || {}).disabled;
    }
  },

  methods: {
    handleClick(evt) {
      this.$emit('click', evt);
    }
  }
};
</script>

<style lang="scss" scoped>
//colors
$white: #fff;
$color_mischka_approx: #dcdfe6;
$color_shuttle_gray_approx: #606266;
$color_dodger_blue_approx: #409eff;
$color_hawkes_blue_approx: #c6e2ff;
$color_zumthor_approx: #ecf5ff;
$color_havelock_blue_approx: #3a8ee6;
$color_ghost_approx: #c0c4cc;
$color_athens_gray_approx: #ebeef5;
$white_35: rgba(255,255,255,.35);
$color_malibu_approx: #66b1ff;
$color_anakiwa_approx: #a0cfff;
$color_sail_approx: #b3d8ff;
$color_pattens_blue_approx: #d9ecff;
$color_apple_approx: #67c23a;
$color_mantis_approx: #85ce61;
$color_feijoa_approx: #b3e19d;
$color_peppermint_approx: #f0f9eb;
$color_tea_green_approx: #c2e7b0;
$color_tulip_tree_approx: #e6a23c;
$color_porsche_approx: #ebb563;
$color_brandy_punch_approx: #cf9236;
$color_maize_approx: #f3d19e;
$color_old_lace_approx: #fdf6ec;
$color_wheat_approx: #f5dab1;
$color_manhattan_approx: #f0c78a;
$color_champagne_approx: #faecd8;
$color_bittersweet_approx: #f56c6c;
$color_geraldine_approx: #f78989;
$color_roman_approx: #dd6161;
$color_cornflower_lilac_approx: #fab6b6;
$color_bridesmaid_approx: #fef0f0;
$color_your_pink_approx: #fbc4c4;
$color_rose_bud_approx: #f9a7a7;
$color_cinderella_approx: #fde2e2;
$color_manatee_approx: #909399;
$color_gray_chateau_approx: #a6a9ad;
$color_raven_approx: #82848a;
$color_iron_approx: #d3d4d6;
$color_bombay_approx: #bcbec2;
$white_50: rgba(255,255,255,.5);

//@extend-elements
//original selectors
//.el-button:focus, .el-button:hover
%extend_1 {
  color: $color_dodger_blue_approx;
  border-color: $color_hawkes_blue_approx;
  background-color: $color_zumthor_approx;
}

//original selectors
//.el-button.is-plain:focus, .el-button.is-plain:hover
%extend_2 {
  background: $white;
  border-color: $color_dodger_blue_approx;
  color: $color_dodger_blue_approx;
}

//original selectors
//.el-button.is-disabled, .el-button.is-disabled:focus, .el-button.is-disabled:hover
%extend_3 {
  color: $color_ghost_approx;
  cursor: not-allowed;
  background-image: none;
  background-color: $white;
  border-color: $color_athens_gray_approx;
}

//original selectors
//.el-button.is-disabled.is-plain, .el-button.is-disabled.is-plain:focus, .el-button.is-disabled.is-plain:hover
%extend_4 {
  background-color: $white;
  border-color: $color_athens_gray_approx;
  color: $color_ghost_approx;
}

//original selectors
//.el-button--primary:focus, .el-button--primary:hover
%extend_5 {
  background: $color_malibu_approx;
  border-color: $color_malibu_approx;
  color: $white;
}

//original selectors
//.el-button--primary.is-active, .el-button--primary:active
%extend_6 {
  background: $color_havelock_blue_approx;
  border-color: $color_havelock_blue_approx;
  color: $white;
}

//original selectors
//.el-button--primary.is-disabled, .el-button--primary.is-disabled:active, .el-button--primary.is-disabled:focus, .el-button--primary.is-disabled:hover
%extend_7 {
  color: $white;
  background-color: $color_anakiwa_approx;
  border-color: $color_anakiwa_approx;
}

//original selectors
//.el-button--primary.is-plain:focus, .el-button--primary.is-plain:hover
%extend_8 {
  background: $color_dodger_blue_approx;
  border-color: $color_dodger_blue_approx;
  color: $white;
}

//original selectors
//.el-button--primary.is-plain.is-disabled, .el-button--primary.is-plain.is-disabled:active, .el-button--primary.is-plain.is-disabled:focus, .el-button--primary.is-plain.is-disabled:hover
%extend_9 {
  color: $color_malibu_approx;
  background-color: $color_zumthor_approx;
  border-color: $color_pattens_blue_approx;
}

//original selectors
//.el-button--success:focus, .el-button--success:hover
%extend_10 {
  background: $color_mantis_approx;
  border-color: $color_mantis_approx;
  color: $white;
}

//original selectors
//.el-button--success.is-active, .el-button--success:active
%extend_11 {
  background: $color_apple_approx;
  border-color: $color_apple_approx;
  color: $white;
}

//original selectors
//.el-button--success.is-disabled, .el-button--success.is-disabled:active, .el-button--success.is-disabled:focus, .el-button--success.is-disabled:hover
%extend_12 {
  color: $white;
  background-color: $color_feijoa_approx;
  border-color: $color_feijoa_approx;
}

//original selectors
//.el-button--success.is-plain:focus, .el-button--success.is-plain:hover
%extend_13 {
  background: $color_apple_approx;
  border-color: $color_apple_approx;
  color: $white;
}

//original selectors
//.el-button--success.is-plain.is-disabled, .el-button--success.is-plain.is-disabled:active, .el-button--success.is-plain.is-disabled:focus, .el-button--success.is-plain.is-disabled:hover
%extend_14 {
  color: $color_feijoa_approx;
  background-color: $color_peppermint_approx;
  border-color: $color_peppermint_approx;
}

//original selectors
//.el-button--warning:focus, .el-button--warning:hover
%extend_15 {
  background: $color_porsche_approx;
  border-color: $color_porsche_approx;
  color: $white;
}

//original selectors
//.el-button--warning.is-active, .el-button--warning:active
%extend_16 {
  background: $color_brandy_punch_approx;
  border-color: $color_brandy_punch_approx;
  color: $white;
}

//original selectors
//.el-button--warning.is-disabled, .el-button--warning.is-disabled:active, .el-button--warning.is-disabled:focus, .el-button--warning.is-disabled:hover
%extend_17 {
  color: $white;
  background-color: $color_maize_approx;
  border-color: $color_maize_approx;
}

//original selectors
//.el-button--warning.is-plain:focus, .el-button--warning.is-plain:hover
%extend_18 {
  background: $color_tulip_tree_approx;
  border-color: $color_tulip_tree_approx;
  color: $white;
}

//original selectors
//.el-button--warning.is-plain.is-disabled, .el-button--warning.is-plain.is-disabled:active, .el-button--warning.is-plain.is-disabled:focus, .el-button--warning.is-plain.is-disabled:hover
%extend_19 {
  color: $color_manhattan_approx;
  background-color: $color_old_lace_approx;
  border-color: $color_champagne_approx;
}

//original selectors
//.el-button--danger:focus, .el-button--danger:hover
%extend_20 {
  background: $color_geraldine_approx;
  border-color: $color_geraldine_approx;
  color: $white;
}

//original selectors
//.el-button--danger.is-active, .el-button--danger:active
%extend_21 {
  background: $color_roman_approx;
  border-color: $color_roman_approx;
  color: $white;
}

//original selectors
//.el-button--danger.is-disabled, .el-button--danger.is-disabled:active, .el-button--danger.is-disabled:focus, .el-button--danger.is-disabled:hover
%extend_22 {
  color: $white;
  background-color: $color_cornflower_lilac_approx;
  border-color: $color_cornflower_lilac_approx;
}

//original selectors
//.el-button--danger.is-plain:focus, .el-button--danger.is-plain:hover
%extend_23 {
  background: $color_bittersweet_approx;
  border-color: $color_bittersweet_approx;
  color: $white;
}

//original selectors
//.el-button--danger.is-plain.is-disabled, .el-button--danger.is-plain.is-disabled:active, .el-button--danger.is-plain.is-disabled:focus, .el-button--danger.is-plain.is-disabled:hover
%extend_24 {
  color: $color_rose_bud_approx;
  background-color: $color_bridesmaid_approx;
  border-color: $color_cinderella_approx;
}

//original selectors
//.el-button--info:focus, .el-button--info:hover
%extend_25 {
  background: $color_gray_chateau_approx;
  border-color: $color_gray_chateau_approx;
  color: $white;
}

//original selectors
//.el-button--info.is-active, .el-button--info:active
%extend_26 {
  background: $color_raven_approx;
  border-color: $color_raven_approx;
  color: $white;
}

//original selectors
//.el-button--info.is-disabled, .el-button--info.is-disabled:active, .el-button--info.is-disabled:focus, .el-button--info.is-disabled:hover
%extend_27 {
  color: $white;
  background-color: $color_ghost_approx;
  border-color: $color_ghost_approx;
}

//original selectors
//.el-button--info.is-plain:focus, .el-button--info.is-plain:hover
%extend_28 {
  background: $color_manatee_approx;
  border-color: $color_manatee_approx;
  color: $white;
}

//original selectors
//.el-button--info.is-plain.is-disabled, .el-button--info.is-plain.is-disabled:active, .el-button--info.is-plain.is-disabled:focus, .el-button--info.is-plain.is-disabled:hover
%extend_29 {
  color: $color_bombay_approx;
  background-color: $color_athens_gray_approx;
  border-color: $color_athens_gray_approx;
}

//original selectors
//.el-button--text:focus, .el-button--text:hover
%extend_30 {
  color: $color_malibu_approx;
  border-color: transparent;
  background-color: transparent;
}

.el-button {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: $white;
  border: 1px solid $color_mischka_approx;
  color: $color_shuttle_gray_approx;
  text-align: center;
  //Instead of the line below you could use @include box-sizing($bs)
  box-sizing: border-box;
  outline: 0;
  margin: 0;
  //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
  transition: .1s;
  font-weight: 500;
  padding: 12px 20px;
  font-size: 14px;
  //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
  border-radius: 4px;
  &:focus {
    @extend %extend_1;
  }
  &:hover {
    @extend %extend_1;
  }
  &:active {
    color: $color_havelock_blue_approx;
    border-color: $color_havelock_blue_approx;
    outline: 0;
  }
  &.is-plain {
    &:focus {
      @extend %extend_2;
    }
    &:hover {
      @extend %extend_2;
    }
    &:active {
      color: $color_havelock_blue_approx;
      border-color: $color_havelock_blue_approx;
      background: $white;
      outline: 0;
    }
  }
  &.is-disabled {
    @extend %extend_3;
    &:focus {
      @extend %extend_3;
    }
    &:hover {
      @extend %extend_3;
    }
    &.el-button--text {
      background-color: transparent;
    }
    &.is-plain {
      @extend %extend_4;
      &:focus {
        @extend %extend_4;
      }
      &:hover {
        @extend %extend_4;
      }
    }
  }
  &.is-loading {
    position: relative;
    pointer-events: none;
    &:before {
      pointer-events: none;
      content: '';
      position: absolute;
      left: -1px;
      top: -1px;
      right: -1px;
      bottom: -1px;
      //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
      border-radius: inherit;
      background-color: $white_35;
    }
  }
  &.is-round {
    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
    border-radius: 20px;
    padding: 12px 23px;
  }
  &.is-circle {
    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
    border-radius: 50%;
    padding: 12px;
  }
  + .el-button {
    margin-left: 10px;
  }
  [class*=el-icon-] + span {
    margin-left: 5px;
  }
}
.el-button::-moz-focus-inner {
  border: 0;
}
.el-button--primary {
  color: $white;
  background-color: $color_dodger_blue_approx;
  border-color: $color_dodger_blue_approx;
  &:focus {
    @extend %extend_5;
  }
  &:hover {
    @extend %extend_5;
  }
  &.is-active {
    @extend %extend_6;
  }
  &:active {
    @extend %extend_6;
    outline: 0;
  }
  &.is-disabled {
    @extend %extend_7;
    &:active {
      @extend %extend_7;
    }
    &:focus {
      @extend %extend_7;
    }
    &:hover {
      @extend %extend_7;
    }
  }
  &.is-plain {
    color: $color_dodger_blue_approx;
    background: $color_zumthor_approx;
    border-color: $color_sail_approx;
    &:focus {
      @extend %extend_8;
    }
    &:hover {
      @extend %extend_8;
    }
    &:active {
      background: $color_havelock_blue_approx;
      border-color: $color_havelock_blue_approx;
      color: $white;
      outline: 0;
    }
    &.is-disabled {
      @extend %extend_9;
      &:active {
        @extend %extend_9;
      }
      &:focus {
        @extend %extend_9;
      }
      &:hover {
        @extend %extend_9;
      }
    }
  }
}
.el-button--success {
  color: $white;
  background-color: $color_apple_approx;
  border-color: $color_apple_approx;
  &:focus {
    @extend %extend_10;
  }
  &:hover {
    @extend %extend_10;
  }
  &.is-active {
    @extend %extend_11;
  }
  &:active {
    @extend %extend_11;
    outline: 0;
  }
  &.is-disabled {
    @extend %extend_12;
    &:active {
      @extend %extend_12;
    }
    &:focus {
      @extend %extend_12;
    }
    &:hover {
      @extend %extend_12;
    }
  }
  &.is-plain {
    color: $color_apple_approx;
    background: $color_peppermint_approx;
    border-color: $color_tea_green_approx;
    &:focus {
      @extend %extend_13;
    }
    &:hover {
      @extend %extend_13;
    }
    &:active {
      background: $color_apple_approx;
      border-color: $color_apple_approx;
      color: $white;
      outline: 0;
    }
    &.is-disabled {
      @extend %extend_14;
      &:active {
        @extend %extend_14;
      }
      &:focus {
        @extend %extend_14;
      }
      &:hover {
        @extend %extend_14;
      }
    }
  }
}
.el-button--warning {
  color: $white;
  background-color: $color_tulip_tree_approx;
  border-color: $color_tulip_tree_approx;
  &:focus {
    @extend %extend_15;
  }
  &:hover {
    @extend %extend_15;
  }
  &.is-active {
    @extend %extend_16;
  }
  &:active {
    @extend %extend_16;
    outline: 0;
  }
  &.is-disabled {
    @extend %extend_17;
    &:active {
      @extend %extend_17;
    }
    &:focus {
      @extend %extend_17;
    }
    &:hover {
      @extend %extend_17;
    }
  }
  &.is-plain {
    color: $color_tulip_tree_approx;
    background: $color_old_lace_approx;
    border-color: $color_wheat_approx;
    &:focus {
      @extend %extend_18;
    }
    &:hover {
      @extend %extend_18;
    }
    &:active {
      background: $color_brandy_punch_approx;
      border-color: $color_brandy_punch_approx;
      color: $white;
      outline: 0;
    }
    &.is-disabled {
      @extend %extend_19;
      &:active {
        @extend %extend_19;
      }
      &:focus {
        @extend %extend_19;
      }
      &:hover {
        @extend %extend_19;
      }
    }
  }
}
.el-button--danger {
  color: $white;
  background-color: $color_bittersweet_approx;
  border-color: $color_bittersweet_approx;
  &:focus {
    @extend %extend_20;
  }
  &:hover {
    @extend %extend_20;
  }
  &.is-active {
    @extend %extend_21;
  }
  &:active {
    @extend %extend_21;
    outline: 0;
  }
  &.is-disabled {
    @extend %extend_22;
    &:active {
      @extend %extend_22;
    }
    &:focus {
      @extend %extend_22;
    }
    &:hover {
      @extend %extend_22;
    }
  }
  &.is-plain {
    color: $color_bittersweet_approx;
    background: $color_bridesmaid_approx;
    border-color: $color_your_pink_approx;
    &:focus {
      @extend %extend_23;
    }
    &:hover {
      @extend %extend_23;
    }
    &:active {
      background: $color_roman_approx;
      border-color: $color_roman_approx;
      color: $white;
      outline: 0;
    }
    &.is-disabled {
      @extend %extend_24;
      &:active {
        @extend %extend_24;
      }
      &:focus {
        @extend %extend_24;
      }
      &:hover {
        @extend %extend_24;
      }
    }
  }
}
.el-button--info {
  color: $white;
  background-color: $color_manatee_approx;
  border-color: $color_manatee_approx;
  &:focus {
    @extend %extend_25;
  }
  &:hover {
    @extend %extend_25;
  }
  &.is-active {
    @extend %extend_26;
  }
  &:active {
    @extend %extend_26;
    outline: 0;
  }
  &.is-disabled {
    @extend %extend_27;
    &:active {
      @extend %extend_27;
    }
    &:focus {
      @extend %extend_27;
    }
    &:hover {
      @extend %extend_27;
    }
  }
  &.is-plain {
    color: $color_manatee_approx;
    background: $color_athens_gray_approx;
    border-color: $color_iron_approx;
    &:focus {
      @extend %extend_28;
    }
    &:hover {
      @extend %extend_28;
    }
    &:active {
      background: $color_raven_approx;
      border-color: $color_raven_approx;
      color: $white;
      outline: 0;
    }
    &.is-disabled {
      @extend %extend_29;
      &:active {
        @extend %extend_29;
      }
      &:focus {
        @extend %extend_29;
      }
      &:hover {
        @extend %extend_29;
      }
    }
  }
}
.el-button--text {
  border-color: transparent;
  color: $color_dodger_blue_approx;
  background: 0 0;
  padding-left: 0;
  padding-right: 0;
  &.is-disabled {
    border-color: transparent;
    &:focus {
      border-color: transparent;
    }
    &:hover {
      border-color: transparent;
    }
  }
  &:active {
    border-color: transparent;
    color: $color_havelock_blue_approx;
    background-color: transparent;
  }
  &:focus {
    @extend %extend_30;
  }
  &:hover {
    @extend %extend_30;
  }
}
.el-button--medium {
  padding: 10px 20px;
  font-size: 14px;
  //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
  border-radius: 4px;
  &.is-round {
    padding: 10px 20px;
  }
  &.is-circle {
    padding: 10px;
  }
}
.el-button--mini {
  font-size: 12px;
  //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
  border-radius: 3px;
  padding: 7px 15px;
  &.is-round {
    padding: 7px 15px;
  }
  &.is-circle {
    padding: 7px;
  }
}
.el-button--small {
  font-size: 12px;
  //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
  border-radius: 3px;
  padding: 9px 15px;
  &.is-round {
    padding: 9px 15px;
  }
  &.is-circle {
    padding: 9px;
  }
}

</style>
